<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Overview map - 4.11</title>
		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
				z-index: -1;
			}
			
			#overviewDiv {
				position: absolute;
				top: 12px;
				right: 12px;
				width: 200px;
				height: 200px;
				border: 1px solid black;
				z-index: 1;
				overflow: hidden;
			}
			
			#extentDiv {
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				z-index: 2;
			}
			
			.switch {
				position: absolute;
				top: 86px;
				left: 16px;
				width: 30px;
				height: 30px;
				box-shadow: 0 0 3px gray;
				border-radius: 5px;
				background: white;
				color: rgb(163, 163, 163, 0.8);
				font-size: 14px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
			
			.switch:hover {
				color: rgb(163, 163, 163);
			}
		</style>

		<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://js.arcgis.com/4.11/"></script>

		<script>
			$(function() {
				var overMapView = null;
				var mainView = null;
				require([
					"esri/Map",
					"esri/views/SceneView",
					"esri/views/MapView",
					"esri/geometry/Point",
					"esri/Graphic",
					"esri/layers/TileLayer",
					"esri/layers/FeatureLayer",
					"esri/layers/GraphicsLayer",
					"esri/layers/support/LabelClass",
					"esri/widgets/CoordinateConversion",
					"esri/widgets/Print",
					"esri/tasks/PrintTask",
					"esri/tasks/support/PrintTemplate",
					"esri/tasks/support/PrintParameters",
					"esri/core/watchUtils"
				], function(Map, SceneView, MapView, Point, Graphic, TileLayer, FeatureLayer, GraphicsLayer, LabelClass, CoordinateConversion, Print, PrintTask, PrintTemplate, PrintParameters, watchUtils) {
					// Create a Map with a basemap, to be used with in the main view
					var mainMap = new Map({
						basemap: "hybrid",
					});

					// Create another Map, to be used in the overview "view"
					var overviewMap = new Map({
						basemap: "topo"
					});

					var gplayer = new GraphicsLayer();
					var gp = new Graphic({
						geometry: {
							type: "point",
							x: 112.99,
							y: 23.34,
							spatialReference: {
								wkid: 4326
							}
						},
						symbol: {
							type: "simple-marker",
							color: "yellow",
							outline: {
								color: "red",
								width: 2
							}
						}
					});
					gplayer.add(gp);
					mainMap.add(gplayer);
					// Create the SceneView
					//								var mainView = new SceneView({
					//									container: "viewDiv",
					//									map: mainMap,
					//									camera: {
					//										position: {
					//											spatialReference: {
					//												wkid: 4326
					//											},
					//											x: 112.99,
					//											y: 23.23,
					//											z: 38710
					//										},
					//										heading: 203,
					//										tilt: 72
					//									}
					//								});

					var initView = new MapView({
						container: "viewDiv",
						map: mainMap,
						center: [112.99, 23.23],
						zoom: 16,
						constraints: {
							rotationEnabled: false
						}
					});
					setView(initView)
					// Create the overMapView for overview map
					overMapView = new MapView({
						container: "overviewDiv",
						map: overviewMap,
						constraints: {
							rotationEnabled: false
						}
					});
					//禁止滚轮缩放地图
					overMapView.on("mouse-wheel", function(event) {
						event.stopPropagation();
					});
					//禁止移动地图
					overMapView.on("drag", function(event) {
						event.stopPropagation();
					});
					// Remove the default widgets
					overMapView.ui.components = [];

					var extentDiv = document.getElementById("extentDiv");
					var dragFlag = false;
					var $divWrap = $(extentDiv).parents("#overviewDiv"); //整个移动区域 
					var abs_x, abs_y, leftX, topY;
					$(extentDiv).on("mousedown", function(event) {
						$(this).css("cursor", "move");
						leftX = 0;
						topY = 0;
						dragFlag = true;
						console.log(event);
						abs_x = event.pageX - $(this).offset().left;
						abs_y = event.pageY - $(this).offset().top;
						console.log("abs_x:" + abs_x);
						console.log("abs_y:" + abs_y);
					});
					$divWrap.on("mousemove", function(e) {
						$(extentDiv).css("cursor", "move");
						if(dragFlag == true) {
							console.log(e);
							leftX = e.pageX - abs_x - $divWrap.offset().left;
							topY = e.pageY - abs_y - $divWrap.offset().top;
							console.log(leftX + "--" + topY);
							$(extentDiv).css("top", topY);
							$(extentDiv).css("left", leftX);
						}
					});
					$(extentDiv).on("mouseup", function(e) {
						var mapPoint = overMapView.toMap({
							x: leftX + $(this).width() / 2,
							y: topY + $(this).height() / 2
						});
						mainView.goTo({
							center: mapPoint
						});
						overMapView.goTo({
							center: mapPoint
						});
						$(this).css("cursor", "default");
						dragFlag = false;
					});

					function updateOverview() {
						// Animate the MapView to a zoomed-out scale so we get a nice overview.
						// We use the "progress" callback of the goTo promise to update
						// the overview extent while animating
						overMapView.goTo({
							center: mainView.center,
							scale: mainView.scale * 6 *
								Math.max(mainView.width / overMapView.width, mainView.height / overMapView.height)
						});
					};

					// Update the overview extent by converting the SceneView extent to the 
					// overMapView screen coordinates and updating the extentDiv position.
					function updateOverviewExtent() {
						var extent = mainView.extent;
						var bottomLeft = overMapView.toScreen(
							new Point({
								x: extent.xmin,
								y: extent.ymin,
								spatialReference: extent.spatialReference
							})
						);
						var topRight = overMapView.toScreen(
							new Point({
								x: extent.xmax,
								y: extent.ymax,
								spatialReference: extent.spatialReference
							})
						);
						extentDiv.style.top = topRight.y + "px";
						extentDiv.style.left = bottomLeft.x + "px";
						extentDiv.style.height = bottomLeft.y - topRight.y + "px";
						extentDiv.style.width = topRight.x - bottomLeft.x + "px";
					}

					function setView(view) {
						mainView = view;
						mainView.when(function() {
							// Update the overview extent whenever the overMapView or SceneView extent changes
							mainView.watch("extent", updateOverviewExtent);
							overMapView.watch("extent", updateOverviewExtent);
							// Update the minimap overview when the main view becomes stationary 
							watchUtils.when(mainView, "stationary", updateOverview);
						});
						var cord = new CoordinateConversion({
							view: mainView
						})
						mainView.ui.add(cord, "bottom-left")
					}

					$(".switch").on("click", function() {
						var cloneExtent = mainView.extent.clone();
						var viewpoint = mainView.viewpoint.clone();
						var mview = null;
						if($(this).text() == "2D") {
							mview = new SceneView({
								container: "viewDiv",
								map: mainMap,
								camera: {
									position: {
										spatialReference: {
											wkid: 4326
										},
										x: 112.99,
										y: 23.23,
										z: 38710
									},
									heading: 203,
									tilt: 72
								}
							})
							mview.viewpoint = viewpoint;
							mview.extent = cloneExtent;
							$(this).text("3D")
						} else {
							mview = new MapView({
								container: "viewDiv",
								map: mainMap,
								center: [112.99, 23.23],
								zoom: 16,
								constraints: {
									rotationEnabled: false
								}
							})
							mview.viewpoint = viewpoint
							$(this).text("2D")
						}
						setView(mview)
					})

				}); //require-end
			})
		</script>
	</head>

	<body>
		<div id="viewDiv"></div>
		<div id="overviewDiv">
			<div id="extentDiv"></div>
		</div>
		<div class="switch">2D</div>
	</body>

</html>